<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷调查系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* 页面容器样式 */
        .page-container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        /* 页面切换动画 */
        .page {
            transition: transform 0.5s ease-in-out;
        }
        
        /* 响应式布局调整 */
        @media (max-width: 768px) {
            .page-container {
                width: 100%;
                height: 100%;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 页面容器 -->
    <div class="page-container flex">
        <!-- 首页 -->
        <div class="page w-full h-full flex-shrink-0">
            <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
                <!-- 导航栏 -->
                <nav class="bg-white/80 backdrop-blur-md shadow-sm">
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div class="flex justify-between h-16 items-center">
                            <div class="flex items-center">
                                <i class="ri-file-list-3-line text-2xl text-indigo-600 mr-2"></i>
                                <span class="text-xl font-semibold text-gray-800">问卷调查系统</span>
                            </div>
                            <div class="flex items-center space-x-4">
                                <a href="Login.html" class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors">
                                    管理员登录
                                </a>
                            </div>
                        </div>
                    </div>
                </nav>

                <!-- 主要内容区 -->
                <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                    <div class="text-center">
                        <h1 class="text-4xl font-bold text-gray-900 mb-6">
                            欢迎使用问卷调查系统
                        </h1>
                       
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                            <a href="questionnaire.html" class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                                <i class="ri-file-pdf-line text-4xl text-red-500 mb-4"></i>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">问卷调查1</h3>
                                <p class="text-gray-600">点击开始使用</p>
                            </a>
                            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                                <i class="ri-markdown-line text-4xl text-blue-500 mb-4"></i>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">后续功能敬请期待。。。</h3>
                                <p class="text-gray-600">。。。</p>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>

        <!-- 文档阅读页面 -->
        <div class="page w-full h-full flex-shrink-0">
            <div class="min-h-screen bg-white">
                <!-- 导航栏 -->
                <nav class="bg-white border-b">
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div class="flex justify-between h-16 items-center">
                            <div class="flex items-center">
                                <i class="ri-arrow-left-line text-2xl text-gray-600 mr-2 cursor-pointer"></i>
                                <span class="text-xl font-semibold text-gray-800">文档阅读</span>
                            </div>
                            <div class="flex items-center space-x-4">
                                <button class="p-2 rounded-lg hover:bg-gray-100">
                                    <i class="ri-settings-3-line text-xl text-gray-600"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </nav>

                <!-- 主要内容区 -->
                <div class="flex h-[calc(100vh-4rem)]">
                    <!-- 侧边栏 -->
                    <div class="w-64 bg-gray-50 border-r overflow-y-auto">
                        <div class="p-4">
                            <div class="flex items-center mb-4">
                                <i class="ri-folder-line text-xl text-gray-600 mr-2"></i>
                                <span class="font-medium text-gray-800">文档目录</span>
                            </div>
                            <div class="space-y-2">
                                <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                                    <i class="ri-folder-line text-gray-600 mr-2"></i>
                                    <span class="text-gray-700">示例文件夹</span>
                                </div>
                                <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                                    <i class="ri-file-text-line text-gray-600 mr-2"></i>
                                    <span class="text-gray-700">示例文档.md</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文档内容区 -->
                    <div class="flex-1 overflow-y-auto p-8">
                        <div class="max-w-3xl mx-auto">
                            <h1 class="text-3xl font-bold text-gray-900 mb-6">示例文档标题</h1>
                            <div class="prose prose-lg max-w-none">
                                <p class="text-gray-700 leading-relaxed">
                                    这里是文档内容区域，支持Markdown格式的渲染。文档内容将在这里优雅地展示，
                                    提供舒适的阅读体验。您可以通过左侧的目录导航不同的文档。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面切换逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const pages = document.querySelectorAll('.page');
            let currentPage = 0;

            // 添加页面切换按钮事件监听
            document.querySelector('.ri-arrow-left-line').addEventListener('click', function() {
                if (currentPage > 0) {
                    currentPage--;
                    updatePagePosition();
                }
            });

            function updatePagePosition() {
                pages.forEach((page, index) => {
                    page.style.transform = `translateX(-${currentPage * 100}%)`;
                });
            }
        });
    </script>
</body>
</html> 